﻿@model Vizzio.Models.RegisterViewModel
@{
    ViewBag.Title = "Registrarse";
    Layout = "~/Views/Shared/_LoginFirst.cshtml";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "formularioPersona" }))
{
    @Html.AntiForgeryToken()
    <h4>Crear nueva cuenta.</h4>
    <p>Todos los datos con * son obligatorios</p>
    <hr />
    @Html.ValidationSummary()
    <div class="control-group form-group">
        @Html.LabelFor(model => model.UserName,"* Nombre de Usuario" ,new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.UserName, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "20", data_validation_maxlength_message = "Muy largo: Ingrese 20 o menos caracteres", minlength = "4", data_validation_minlength_message = "Muy corto: Ingrese al menos 4 caracteres", data_validation_regex_regex = "[A-ZñÑa-z0-9\\.#\\-_]*", data_validation_regex_message = "Solo caracteres Alfanumericos inclidios [-_#.]" })
            <p class="help-block">Requerido: 4 a 20 caracteres</p>
        </div>
    </div>

    <div class="control-group form-group">
            @Html.LabelFor(model => model.Nombre,"* Nombre", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Nombre, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "20", data_validation_maxlength_message = "Muy largo: Ingrese 20 o menos caracteres", minlength = "2", data_validation_minlength_message = "Muy corto: Ingrese al menos 2 caracteres", data_validation_regex_regex = "([A-ZñÑa-z]+[ ]{0,1})*([A-ZñÑa-z]+$)", data_validation_regex_message = "Solo caracteres Alfabeticos sin espacios al principio ni final. Sin espacios Dobles" })
                <p class="help-block">2 a 20 Careacteres Albeticos</p>
            </div>
        </div>
    
    <div class="control-group form-group">
            @Html.LabelFor(model => model.Apellidos,"* Apellidos" ,new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Apellidos, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "30", data_validation_maxlength_message = "Muy largo: Ingrese 30 o menos caracteres", minlength = "2", data_validation_minlength_message = "Muy corto: Ingrese al menos 2 caracteres", data_validation_regex_regex = "([A-ZñÑa-z]+[ ]{0,1})([A-ZñÑa-z]+$)", data_validation_regex_message = "Solo caracteres Alfabeticos. Maximo dos Apellidos" })
                <p class="help-block">2 a 30 caracteres Albeticos</p>
            </div>
        </div>
    
    <div class="control-group form-group">
            @Html.LabelFor(model => model.CorreoElectronico,"* Correo Electronico", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CorreoElectronico, new { @class = "form-control", @type = "email", required = "", data_validation_required_message = "Campo requerido", maxlength = "40", data_validation_maxlength_message = "Muy largo: Ingrese 40 o menos caracteres", minlength = "6", data_validation_minlength_message = "Muy corto: Ingrese al menos 6 caracteres" })
                <p class="help-block">Requerido: 6 a 40 Caracteres</p>
            </div>
        </div>
        
    <div class="control-group form-group">
            @Html.LabelFor(model => model.Celular,"* Celular", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Celular, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "11", data_validation_maxlength_message = "Muy largo: Ingrese menos de 11 digitos", minlength = "8", data_validation_minlength_message = "Muy corto: Ingrese al menos 8 digitos", data_validation_number_message = "Debe ingresar solo numeros" })
                <p class="help-block">Requerido: 8 a 11 Digitos Numericos</p>
                @Html.ValidationMessageFor(model => model.Celular)
            </div>
        </div>
    
    <div class="control-group form-group">
            @Html.LabelFor(model => model.Password, "* Contraseña",new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.PasswordFor(model => model.Password, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "20", data_validation_maxlength_message = "Muy largo: Ingrese 20 o menos caracteres", minlength = "6", data_validation_minlength_message = "Muy corto: Ingrese al menos 6 caracteres"})
                <p class="help-block">Requerido: 6 a 20 Caracteres</p>
            </div>
        </div>
    
    <div class="control-group form-group">
            @Html.LabelFor(model => model.ConfirmPassword,"* Confirmar Contraseña", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.PasswordFor(model => model.ConfirmPassword, new { @class = "form-control", @data_validation_match_match = "Password", data_validation_match_message = "La contraseña no coincide"})
                <p class="help-block">Repita la contraseña</p>
            </div>
        </div>

    <div class="form-group controls">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-primary" value="Registrar" />
        </div>
    </div>

        <P>
            @Html.ActionLink("Volver Atras", "Login",new { @class = "btn btn-default" })
        </P>
        
}

@section Scripts {
    <script>
        $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); });
    </script>

    @Scripts.Render("~/bundles/jqueryval")
}
